<template>
  <ElTable class="list-table is-border" height="720" :="$attrs" border :data="data">
    <ElTableColumn label="登记时间" prop="djsj" align="center" width="120"></ElTableColumn>
    <ElTableColumn label="投诉渠道" prop="tsqdName" align="center" width="100"></ElTableColumn>
    <ElTableColumn label="投诉客户对接渠道" prop="tskhdjqdName" align="center" width="90"></ElTableColumn>
    <ElTableColumn label="投诉客户对接群名" prop="tskhdjqm" align="center" width="200">
      <template #default="{ row }">
        <div class="ellipsis-cell">{{ row.tskhdjqm }}</div>
      </template>
    </ElTableColumn>
    <ElTableColumn label="投诉问题发生时间" prop="tswtfssj" align="center" width="180"></ElTableColumn>
    <ElTableColumn label="关键词" prop="gjc" align="center" width="180">
      <template #default="{ row }">
        <div class="ellipsis-cell">{{ row.gjc }}</div>
      </template>
    </ElTableColumn>
    <ElTableColumn label="问题描述" prop="wtms" align="center" width="220">
      <template #default="{ row }">
        <div class="ellipsis-cell">{{ row.wtms }}</div>
      </template>
    </ElTableColumn>
    <ElTableColumn label="违规问题分类" prop="wgwtfbyName" align="center" width="155"></ElTableColumn>
    <ElTableColumn label="违规分类明细" prop="wgwtfbeName" align="center" width="155"></ElTableColumn>
    <ElTableColumn label="处理员" prop="zdclry" align="center" width="100"></ElTableColumn>
    <ElTableColumn label="录入人" prop="cjr" align="center" width="100"></ElTableColumn>
    <ElTableColumn prop="_action" label="操作" fixed="right" :min-width="180" header-align="center" align="center">
      <template #default="{ row }">
        <ElButton type="primary" link @click="$emit('edit-complaint', row)">编辑</ElButton>
        <ElButton type="primary" link @click="openFj(row)">附件</ElButton>
        <ElButton type="primary" link @click="skip(row)">跳转</ElButton>
      </template>
    </ElTableColumn>
  </ElTable>

  <FileDialog :fjObj="fjObj"></FileDialog>

</template>

<script setup lang="ts">
import { ElTableColumn } from 'element-plus';
import { reactive } from 'vue'
import FileDialog from '@/views/menus/n-ykf-file/components/FileDialog.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

defineProps({
    data: {
        type: Array,
        default: () => [],
    },
    hiddenColumns: {
        type: Object,
        default: () => ({}),
    },
});

const fjObj = reactive({
  isShow: false,
  gjjlId: '',
  mklx: ''
});

const skip = (row: any) => {
  router.push({
    name: 'Detail',
    query: {
      complaintId: row.complaintId,
    }
  })
}

// 打开附件页面
const openFj = async (row) => {
  // 传过去mklx以及glId
  fjObj.isShow = true;
  fjObj.gjjlId = row.complaintId;
  fjObj.mklx = 'tsjy';
}
</script>

<style scoped lang="scss">
.ellipsis-cell {
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 隐藏超出部分 */
  text-overflow: ellipsis;
  /* 显示省略号 */
  max-width: 200px;
  /* 设置一个最大宽度，根据需要调整 */
}
</style>